<template>
  <div class="fill-rect ff-regular" v-if="getNiticeList && getNiticeList.length > 0">
    <div></div>
    <div class="fill-area">
      <div class="scroll-sty" v-for="(item, index) in showMore ? getNiticeList : [getNiticeList[0]]" :key="index">
        <div class="fill-head" :style="{ marginLeft: index !== 0 ? '22px' : '' }">
          <Icon v-if="index === 0" type="ios-information-circle" size="16" />
          <span v-if="item.title" class="head-title">{{ item.title }}</span>
          <span>{{ item.time || '-' }}</span>
          <!-- 商家问题/商品下架-无货，Xx后自动取消订单 -->
          <div class="cancel-info ff-bold" v-if="item.issueType == '201' || item.issueType == '208'">
            <count-down :current-time="serverTime" :end-time="endTime"></count-down>
            {{ $t("order.orderCancelTimeRight") }}
          </div>
        </div>
        <div v-if="item.issueType == '0000'" class="fill-tips" v-html="item.sub"></div>
        <div v-else class="fill-tips">
          {{ item.sub || '' }}
          <!-- 用户问题/盲盒类商品 -->
          <div class="end-btn" v-if="item.issueType == '204'">
            <Button type="primary" class="know-btn" @click="knowBtn()">{{ $t('order.know_tip_text') }}</Button>
          </div>
        </div>
        <div v-if="item.imgs && item.imgs.length" style="margin-left: 24px;">
          <img v-for="(a, i) in item.imgs" :key="i" @click="lookMet(i, item.imgs)" class="img-list" :src="a" alt="">
        </div>
        <!-- 操作项 -->
        <div
          v-if="item.issueType == '301' || item.issueType == '303' || item.issueType == '401' || item.issueType == '201' || item.issueType == '208' || item.issueType == '9999'"
          class="handle-sty">
          <!-- 需要回复的 -->
          <div v-if="item.issueType == '9999'" class="reply-sty">
            <div class="reply-btn" @click="replyBtn()">{{ $t('order.reply_btn') }}</div>
          </div>
          <!-- 卖家缺货操作-取消订单-继续等待 -->
          <div v-if="item.issueType == '301' || item.issueType == '303' || item.issueType == '401'" class="fill-agree ff-bold"
            @click="waitBtn()"> {{
              $t("order.waitSentContinue") }}
          </div>
        </div>
        <!-- 操作项-用户问题/未备注规格 -->
        <div v-if="item.issueType == '203'" class="user-handle">
          <div class="line-sty">
            <Input v-model="inputVal" :placeholder="$t('order.input_text_tip')" class="desc-input" />
            <Button type="primary" class="sum-btn" @click="submitBtn">{{ $t('order.submit_desc') }}</Button>
          </div>
          <Upload :show-upload-list="false" :headers="{
            'X-Access-Token': userToken,
            'lang': 'en_US'
          }" biz="chat" :data="{
            biz: 'custom'
          }" name="file" :disabled="uploadLoading" :max-size="3072" :before-upload="() => handleBeforeUpload()"
            :on-success="(response) => onSuccess(response)" :on-exceeded-size="() => handleMaxSize(file)"
            :action="uploadURL" :accept="'.png,.jpg,.jpeg'">
            <div class="loading-wrap" v-if="uploadLoading">
              <t-loading></t-loading>
            </div>
            <div v-if="imageUrl != ''" class="preview-img">
              <img class="upload-image" :src="imageUrl" alt="" />
              <img src="@/assets/images/public/delete.png" class="delete-icon" @click="($event) => removeMet($event)"
                alt="">
              <div class="overlay"></div>
            </div>
            <div v-if="!imageUrl & !uploadLoading" class="upload-sty">
              <img src="@/assets/images/public/upload_img.webp" class="upload-img" alt="">
            </div>
          </Upload>
        </div>
      </div>
      <!-- 这里是展开查看完整信息的 -->
      <div class="look-more" v-if="getNiticeList.length > 1" @click="showMore = !showMore">
        {{ showMore ? $t('goods.hide_text_content') : $t('home.seeMore') }}
        <Icon :type="showMore ? 'ios-arrow-up' : 'ios-arrow-down'" size="18" color="#000000" />
      </div>
    </div>
  </div>
</template>
<script>
import { showImagesByIndex } from "@/common/common";
import CountDown from "@/views/main/user/components/count-down";
import { commonUpload } from "@/api/sys";
import TLoading from "@/components/t-loading";
import dayjs from 'dayjs';
export default {
  components: { CountDown, TLoading },
  props: {
    // 订单状态
    orderStatus: {
      type: String,
      default: ''
    },
    //定制异常 - 时间
    cancelAdditionalTime: {
      type: String,
      default: ''
    },
    //补款时间
    additionalSubmitTime: {
      type: String,
      default: ''
    },
    //补款金额
    additionalAmountCny: {
      type: [String, Number],
      default: ''
    },
    //补款时间
    additionalDuration: {
      type: [String, Number],
      default: ''
    },
    //定制服务异常确认
    displayRemarks: {
      type: [Array, String],
      default: ''
    },
    // 缺貨- 创建时间
    outOfStockCreateTime: {
      type: String,
      default: ''
    },
    //缺货 - 预计到货时间
    replenishmentTime: {
      type: String,
      default: ''
    },
    //无货
    removalCancellationTime: {
      type: String,
      default: ''
    },
    // 捋单
    handleOrderInfo: {
      type: [Object, String],
      default: ''
    },
    // 留言回复
    needReplayMsgInfo: {
      type: [Object, String],
      default: ''
    },
    lastExpressMessage: {
      type: [Object, String],
      default: ''
    },
    issueTypeReplay: {
      type: String,
      default: ''
    },
    subId: {
      type: String,
      default: ''
    },
    serverTime: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      showMore: false,
      inputVal: '',
      userToken: localStorage.getItem("USER_TOKEN"),
      uploadURL: commonUpload(),
      imageUrl: '',
      uploadLoading: false
    }
  },
  computed: {
    //有在通知的数据组成一个list
    getNiticeList() {
      let list = [];
      //定制异常 - 时间
      if (this.cancelAdditionalTime) {
        list.push({
          time: this.cancelAdditionalTime,
          sub: this.$t('custom.cancel_text_content'),
          timestamp: new Date(this.cancelAdditionalTime).getTime()
        })
      }
      //补款
      if (this.additionalSubmitTime) {
        list.push({
          title: this.$t("home.add_fee_title"),
          time: this.additionalSubmitTime,
          sub: this.$t('home.reject_tips_star', { price: this.additionalAmountCny, hour: this.additionalDuration }),
          timestamp: new Date(this.additionalSubmitTime).getTime()
        })
      }
      //定制服务异常确认
      if (this.displayRemarks.length) {
        this.displayRemarks.forEach(item => {
          list.push({
            time: item.time,
            sub: item.remark,
            timestamp: item.time ? new Date(item.time).getTime() : 0,
            imgs: item.photosList && item.photosList.length ? item.photosList : []
          })
        })
      }
      // 捋单
      if (this.handleOrderInfo && this.handleOrderInfo.issueType) {
        list.push({
          time: this.handleOrderInfo.createTime,
          sub: this.handleOrderInfo.content,
          issueType: this.handleOrderInfo.issueType,
          timestamp: this.handleOrderInfo.createTime
        })
      }
      // 留言回复
      if (this.needReplayMsgInfo) {
        list.push({
          time: this.needReplayMsgInfo.createTime,
          sub: this.needReplayMsgInfo.remark,
          issueType: this.issueTypeReplay,//此字段值是用于区分操作按钮显示的
          imgs: this.needReplayMsgInfo.remarkImages ? this.needReplayMsgInfo.remarkImages : [],
          timestamp: this.needReplayMsgInfo.createTime
        })
      }
      // 运单留言
      if (this.lastExpressMessage) {
        list.push({
          time: this.lastExpressMessage.createTime,
          sub: this.lastExpressMessage.remark,
          issueType: this.issueTypeReplay,//此字段值是用于区分操作按钮显示的
          timestamp: this.lastExpressMessage.createTime
        })
      }
      return list.sort(this.timeSort('timestamp'));
    },
    endTime() {
      return dayjs(this.handleOrderInfo.cancelTime).valueOf();
    }
  },
  methods: {
    timeSort(val) {
      return function (a, b) {
        return b[val] - a[val];
      }
    },
    lookMet(index, images) {
      this.$viewerApi({
        images: images,
        options: {
          initialViewIndex: index,
        },
      });
    },
    // 继续等待
    waitBtn() {
      const subObj = {};
      subObj.orderItemId = this.subId;
      subObj.replyType = 1;//回复类型 1-继续等待 2-我已知晓 3-提交备注
      this.$emit('nextHandle', subObj);
    },
    // 我已知晓
    knowBtn() {
      const subObj = {};
      subObj.orderItemId = this.subId;
      subObj.replyType = 2;//回复类型 1-继续等待 2-我已知晓 3-提交备注
      this.$emit('nextHandle', subObj);
    },
    handleMaxSize(file) {
      this.uploadLoading = false;
      this.$Message.error(`File ${file.name} is too large, no more than 3M.`);
    },
    onSuccess(response) {
      // 上传成功
      this.uploadLoading = false;
      if (response.code == 0 || response.code == 200 || response.code == 201) {
        let data = response.result;
        this.imageUrl = data.url;
      } else {
        this.$Message.error(response.message);
      }
    },
    onError() {
      this.$Message.error(this.$t('user.uploadFailure'));
    },
    handleBeforeUpload() {
      this.uploadLoading = true;
    },
    // 删除图片
    removeMet(event) {
      event.stopPropagation();
      this.imageUrl = '';
    },
    // 提交备注
    submitBtn() {
      const subObj = {};
      subObj.orderItemId = this.subId;
      subObj.content = this.inputVal;
      subObj.imgUrl = this.imageUrl;
      subObj.replyType = 3;//回复类型 1-继续等待 2-我已知晓 3-提交备注
      if ((!('content' in subObj) && !('imgUrl' in subObj)) || (!subObj.content && !subObj.imgUrl)) {
        this.$Message.error(this.$t('order.no_info_tip'))
        return;
      }
      this.$emit('nextHandle', subObj);
    },
    // 回复留言
    replyBtn() {
      this.$emit('replyHandle', this.subId)
    }
  }
}
</script>

<style lang="less" scoped>
.fill-rect {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;

  .fill-area {
    width: 90%;
    height: 100%;
    background: #FFEEF4;
    border-radius: 8px 8px 8px 8px;
    padding: 12px 24px;

    .scroll-sty {
      margin-bottom: 14px;

      .fill-head {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 500;
        font-size: 16px;
        color: #FF186B;
        line-height: 20px;
        margin-bottom: 8px;

        .cancel-info {
          display: inline-flex;
          align-items: center;
          justify-content: end;
          margin-left: 16px;
          font-weight: 600;
          color: #FF186B;
        }

        .head-title {

          font-weight: 500;
          font-size: 16px;
          color: #FF186B;
          line-height: 20px;
        }

        span {
          font-weight: 400;
          font-size: 16px;
          color: #767B93;
          line-height: 20px;
          margin-left: 4px;
        }
      }

      .fill-tips {
        font-weight: 400;
        font-size: 16px;
        color: #767B93;
        line-height: 20px;
        margin-left: 32px;

        :deep(b) {
          color: #FF186B;
        }

        .end-btn {
          display: inline;
          margin-left: 36px;

          .know-btn {
            min-width: 100px;
            background-color: #FF186B;
          }
        }
      }

      .handle-sty {
        text-align: right;

        .fill-no {
          font-weight: 600;
          font-size: 12px;
          color: #FF186B;
          line-height: 14px;
          cursor: pointer;
        }

        .reply-sty {
          display: flex;
          justify-content: end;

          .reply-btn {
            padding: 8px 16px;
            height: 32px;
            background: #FF186B;
            border-radius: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 16px;
            cursor: pointer;
            font-weight: 500;
            font-size: 14px;
            color: #FFFFFF;
            line-height: 16px;
          }
        }

        .fill-agree {
          padding: 8px 16px;
          background: #FF186B;
          border-radius: 4px 4px 4px 4px;
          font-weight: 600;
          font-size: 12px;
          color: #FFFFFF;
          line-height: 14px;
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          gap: 8px;
        }
      }

      .user-handle {
        margin-left: 28px;
        margin-top: 16px;

        .line-sty {
          display: flex;
          align-items: center;
          margin-bottom: 16px;

          .desc-input {
            max-width: 495px;

            :deep(.ivu-input) {
              border: none;
              padding-left: 16px;
              font-size: 16px;
              height: 38px;
            }
          }

          .sum-btn {
            font-size: 16px;
            min-width: 100px;
            background-color: #FF186B;
            margin-left: 16px;
          }
        }

        .preview-img {
          position: relative;

          .upload-image {
            width: 56px;
            height: 56px;
            border-radius: 6px;
            object-fit: cover;
          }

          .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 56px;
            height: 56px;
            background-color: transparent;
            display: none;
          }

          .delete-icon {
            display: none;
          }
        }

        .preview-img:hover>.overlay {
          display: block;
          border-radius: 11px;
          background-color: rgba(0, 0, 0, 0.5);
        }

        .preview-img:hover>.delete-icon {
          display: block;
          width: 24px;
          height: 24px;
          position: absolute;
          top: 18px;
          left: 18px;
          z-index: 2;
          cursor: pointer;
        }

        .upload-sty {
          width: 56px;
          height: 56px;
          background: #FFFFFF;
          border-radius: 6px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;

          .upload-img {
            width: 24px;
            height: 24px;
          }
        }
      }

      .img-list {
        width: 48px;
        height: 48px;
        border-radius: 4px;
        margin-top: 12px;
        margin-right: 12px;
      }
    }

    .look-more {
      font-weight: 400;
      font-size: 15px;
      color: #767B93;
      line-height: 24px;
      cursor: pointer;
      display: table;
      margin: 0 auto;
    }

    .look-more>* {
      display: table-cell;
      vertical-align: middle;
    }
  }
}
</style>